<template>
  <el-row class="bgf">
    <el-col :span="12" :offset="5">
      <el-form label-width="100px" :model="forminfo" :rules="rules" ref="forminfo">
        <el-form-item label="活动名称" prop="title">
          <el-input v-model="forminfo.title"></el-input>
        </el-form-item>
        <el-form-item label="活动时间" >
          <el-date-picker
            v-model="time"
            type="datetimerange"
            :picker-options="pickerOptions"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="一级分类" prop="first_cateid">
          <el-select v-model="forminfo.first_cateid" @change="topChange" placeholder="请选择">
            <el-option label="请选择" value></el-option>
            <el-option
              v-for="item in toplist"
              :label="item.catename"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级分类" prop="first_cateid">
          <el-select v-model="forminfo.second_cateid" @change="secondChange" placeholder="请选择">
            <el-option label="请选择" value></el-option>
            <el-option
              v-for="item in secondlist"
              :label="item.catename"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择商品" prop="goodsid">
          <el-select v-model="forminfo.goodsid" placeholder="请选择">
            <el-option label="请选择" value></el-option>
            <el-option
              v-for="item in goodslist"
              :label="item.goodsname"
              :value="item.id"
              :key="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio v-model="forminfo.status" :label="1">正常</el-radio>
          <el-radio v-model="forminfo.status" :label="0">禁用</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" v-if="!$route.params.id" @click="submit">立即添加</el-button>
          <el-button type="success" v-else @click="submit">立即修改</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
    </el-col>
  </el-row>
</template>

<script>
// 如何区分是添加还是修改页面！
// 根据路由是否传入的 动态参数！  this.$route.params.id  修改！
import { 
    editCategory, 
    addCategory, 
    getCategory,
    getChildCategory 
} from "@/request/category";
import {  getCategoryGoods } from "@/request/goods";
import { addSeckill,editSeckill,getSeckill } from "@/request/seckill";
let defaultInfo = {}; // 修改的时候的重置！
export default {
  data() {
    return {
      forminfo: {
        title: "", // 活动名称
        begintime: "", // 开始时间
        endtime:"", // 结束时间
        first_cateid: "", // 一级id
        second_cateid:"", // 二级id
        goodsid:"", // 商品编号
        status: 1 // 状态
      },
      rules: {
        // 表单的验证规则
        title: [ { required: true, message: "活动名称必须写", trigger: "blur" }],
        first_cateid: [ { required: true, message: "一级分类必须", trigger: "blur" }],
        second_cateid: [ { required: true, message: "二级分类必须", trigger: "blur" }],
        goodsid: [ { required: true, message: "请选择商品", trigger: "blur" }],
      },
      toplist: [], //一级分类列表,用于下拉列表！
      secondlist: [], // 二级分类列表,用于下拉列表！
      goodslist:[],  // 商品列表
      time:"",  // 日期范围
      pickerOptions: {  // 日期选择器配置项目
        shortcuts: [{
          text: '1天内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 1);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '3天内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 3);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '1周内',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            end.setTime(end.getTime() + 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }]
      }
    };
  },
  created() {
    this.getlist(); // 获取列表
    if (this.$route.params.id) {
      // 获取修改的这一条的数据，赋给表单！
      this.getinfo(this.$route.params.id);
    }
  },
  methods: {
    async getlist() {
      // 获取分类列表
      this.toplist = await getCategory();
    },
    async getinfo(id) {
      // 获取修改数据，赋给表单！
      this.forminfo = await getSeckill(id);
      // 回显时间
      let start = new Date(this.forminfo.begintime*1)
      let end = new Date(this.forminfo.endtime*1)
      this.time = [start,end]
      this.topChange(this.forminfo.first_cateid);
      this.secondChange(this.forminfo.second_cateid);
      // 赋给一个临时变量，用于重置的时候再次赋值！
      defaultInfo = { ...this.forminfo };
    },
    submit() {
      // 提交数据 【添加、修改】
      this.$refs.forminfo.validate(async isok => {
        if (isok) {
          // 发送请求！
          this.forminfo.begintime = this.time[0].getTime();
          this.forminfo.endtime = this.time[1].getTime();
          let res;
          if (this.$route.params.id) {
                this.forminfo.id = this.$route.params.id;
                res = await editSeckill(this.forminfo); // 修改请求
          } else {
              res = await addSeckill(this.forminfo); // 添加请求
          }
          if (res) {
            this.$router.back();
          }
        } else {
          this.$message.warn("验证不通过");
        }
      });
    },
    reset() {
      // 重置
      // resetFields表单重置！
      if (this.$route.params.id) {
         this.getinfo(this.$route.params.id);
      } else {
        // 添加重置
        this.$refs.forminfo.resetFields();
        this.time ="";
      }
    },
    async topChange(val){
        // 如果选择了一级，就要去寻找一级对应的二级分类菜单
        if(val){ // val就是一级分类的id
           this.secondlist  = await getChildCategory(val);
        }else{
          this.secondlist = [];
        }
    },
    async secondChange(val){
        // 如果选择了二级，就要去寻找对应商品
        if(val){ // val就是二级分类的id
           this.goodslist  = await getCategoryGoods(this.forminfo.first_cateid,val);
        }else{
          this.goodslist = [];
          
        }
    }
  },
  components: {}
};

</script>
<style scoped>
</style>